<template>
  <view class="material-item shadow">
    <view class="image" @click="goView(item)">
      <u--image width="100%" height="100%" :fade="true" duration="150" lazy-load mode="widthFix"
        :src="baseUrl + item.image[0]" v-if="item.image && item.image[0]" />
    </view>
    <view class="title two-lines" @click="goView(item)">{{item.title}}</view>
    <view class="desc">
      <view class="avatar" v-if="false">
        <view class="av" v-if="item.user">
          <!--<u-avatar :src="item.user.base64Image" size="40" v-if="item.user.base64Image"></u-avatar>-->
          <u-avatar :src="item.user.avatar" size="40" v-if="item.user.av * 1 === 0"></u-avatar>
          <u-avatar :src="baseUrl + item.user.avatar" size="40" v-else></u-avatar>
        </view>
        <view class="name" v-if="item.user" @click="goList(item)">{{item.user.nickname}}</view>
      </view>
      <view class="like" @click.stop="handleLike(item)">
        <!--<u-icon name="heart-fill" color="#ff0000" size="40" v-if="item.has_like"></u-icon>-->
        <!--<u-icon name="heart" color="#696969" size="40" v-else></u-icon>-->
        <u-icon
            size="32"
            :name="baseUrl + '/mini/like-active.png'"
            v-if="item.has_like"
        ></u-icon>
        <u-icon
            size="32"
            :name="baseUrl + '/mini/like.png'"
            v-else
        ></u-icon>
        <view class="num" v-if="item.like > 0">{{item.like | showLike}}</view>
      </view>
    </view>
  </view>
</template>

<script>
import config from '../../../config/config'
export default {
  props: ['item'],
  components: {
  },
  filters: {
    showLike(v) {
      // const num = +v + 100000
      const num = +v + 0
      if (num >= 100000) {
        return '100万+'
      }
      if (num >= 100000) {
        return '10万+'
      }
      if (num >= 10000) {
        return '1万+'
      }
      return num
    }
  },
  data() {
    return {
      baseUrl: config.baseUrl
    }
  },
  methods: {
    goView(item) {
      uni.navigateTo({
        url: `/sub_main/material/detail?id=${item.id}`
      })
    },
    handleLike(item) {
      this.$emit('handleLike', item)
    },
    // 查看作者
    goList(item) {
      uni.navigateTo({
        url: '/sub_main/material/list?id=' + item.user_id
      })
    }
  }
}
</script>

<style scoped lang="scss">
.material-item {
  background: white;
  border-radius: 10rpx;
  padding: 20rpx 20rpx 10rpx 20rpx;
  position: relative;
  box-sizing: border-box;
  .desc {
    padding-bottom: 20rpx;
  }
  .title {
    line-height: 1.35em;
    color: #313131;
    //font-weight: 700;
    margin: 20rpx 0 10rpx 0;
    font-size: 26rpx;
  }
  .desc {
    display: flex;
    margin-top: 20rpx;
    align-items: center;
    justify-content: space-between;
    .avatar {
      width: 60%;
      //background: red;
      display: flex;
      align-items: center;
      .av {
        width: 50rpx;
      }
      .name {
        flex: 1;
        color: #696969;
        font-size: 20rpx;
        overflow: hidden;
      }
    }
    .like {
      flex: 1;
      //background: blue;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      .num {
        color: #696969;
        font-size: 24rpx;
        padding-left: 8rpx;
      }
    }
  }
}
</style>
